<template>
  <div>
    <el-dialog
      title="上传资料"
      :visible.sync="dialogVisible"
      width="750"
      center
    >
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="`${url}lsydfk/annexes/upload`"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :data="{ywbh:projectNo,fileType:fileType}"
        name='file'
        :multiple='true'
        :on-success='success'
        :accept="accept"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">
           {{noticeMessage}}
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      dialogVisible: false,
      fileList:[],
      fileType:'',
      projectNo:'',
      noticeMessage:'请上传jpg/png文件',
      accept:'',
      // url: 'http://172.16.18.167:8037/',
      url:'https://lsydsq.cqlandcloud.org.cn/'
    };
  },
  methods: {
    show(fileType,projectNo,accept,notice) {
      this.fileList = []
      this.dialogVisible = true;
      this.fileType = fileType
      this.projectNo = projectNo
      if (accept) {
        this.noticeMessage = `请上传${accept}文件`
        this.accept = accept
      }else{
        this.noticeMessage = ''
        this.accept = ''
      }
      
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    success(){
      this.dialogVisible = false
      this.$emit('success')
    }
  },
};
</script>

<style scoped>
.upload-demo {
  text-align: center;
}
.el-dialog__body {
  height: 200px;
}
</style>